<!DOCTYPE html>
<html id="stylus" class="normal-layout">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="css/icons.ttf" rel="preload" as="font" crossorigin="anonymous">
  <%= htmlWebpackPlugin.tags.headTags %>

  <template data-id="jumpToLine">
    <span i18n="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
  </template>

  <template data-id="regexpTestPartial">
    <a target="_blank" href="https://github.com/stylish-userstyles/stylish/wiki/Applying-styles-to-specific-sites#advanced-matching-with-regular-expressions"><i class=i-info></i></a>
  </template>

  <template data-id="resizeGrip">
    <div class="resize-grip" i18n="title:cm_resizeGripHint"></div>
  </template>

  <template data-id="body"> <!-- https://crbug.com/1288447 -->
    <div id="header" class="dvh100">
      <h1 id="heading" i18n="data-edit:editStyleHeading, data-add:addStyleTitle">
        <a class="usercss-only icon hide-if-sticky"
           href="https://github.com/openstyles/stylus/wiki/Writing-UserCSS"
           i18n="title:externalUsercssDocument" target="_blank">
          <i class=i-info></i>
        </a>
      </h1>
      <section id="basic-info">
        <div id="basic-info-name" class="hide-if-sticky">
          <input id="name" spellcheck="false">
          <a id="reset-name" i18n="title:customNameResetHint" tabindex="0" hidden>
            <i class=i-close></i>
          </a>
          <a id="url" target="_blank" class="icon"><i class=i-external></i></a>
        </div>
        <div id="basic-info-enabled">
          <label id="enabled-label" class="hide-if-sticky"
                 i18n="+styleEnabledLabel, title:toggleStyle"
                 data-hotkey-tooltip="toggleStyle">
            <input type="checkbox" id="enabled">
          </label>
          <span id="livePreview-settings" class="hide-if-sticky hide-if-new">
            <label i18n="+previewLabel, title:previewTooltip">
              <input type="checkbox" id="editor.livePreview">
            </label>
            <details>
              <summary>
                <i class=i-config></i>
              </summary>
              <main>
                <input id="editor.livePreview.delay" type="number" min="0" max="9" step="0.1">s
              </main>
            </details>
          </span>
          <label id="disableAll-label" class="hide-if-sticky"
                 i18n="data-on:disableAllStyles, data-off:disableAllStylesOff">
            <input id="disableAll" type="checkbox">
          </label>
          <div id="preview-errors" class="ellipsis" hidden>
            &nbsp;
            <a class="icon" target="_blank"><i class="i-external"></i></a>
          </div>
        </div>
      </section>
      <section id="actions">
        <div class="buttons">
          <div class="split-btn">
            <button id="save-button" i18n="styleSaveLabel" data-hotkey-tooltip="save" disabled></button
            ><button class="split-btn-pedal usercss-only" i18n="menu-tpl:saveAsTemplate"></button>
          </div>
          <button id="beautify" i18n="styleBeautify"></button>
          <button id="testRE" i18n="+genericTest, title:appliesRegexpOption" hidden></button>
          <a id="cancel-button" i18n="title:styleCancelEditLabel" tabindex="0">
            <i class=i-undo></i>
          </a>
        </div>
        <div id="mozilla-format-buttons" class="buttons sectioned-only hide-if-sticky">
          <button id="from-mozilla" i18n="importLabel"></button>
          <button id="to-mozilla" i18n="exportLabel"></button>
          <a id="to-mozilla-help" class=icon tabindex="0"
             i18n="title:styleMozillaFormatHeading">
            <i class=i-info></i>
          </a>
        </div>
      </section>
      <div id="details-wrapper">
        <details id="options" class="settings ignore-pref-if-compact"
                 data-pref="editor.options.expanded">
          <summary><h2 i18n="editorSettings"></h2></summary>
        </details>
        <details id="styleOpts" class="settings ignore-pref-if-compact"
                 data-pref="editor.options.style.expanded">
          <summary><h2 i18n="styleSettings"></h2></summary>
        </details>
        <details id="publish" data-pref="editor.publish.expanded"
                 class="ignore-pref-if-compact hide-if-new">
          <summary><h2 i18n="publish"></h2></summary>
          <main>
            <a id="usw-url" href="https://userstyles.world" target="_blank">&nbsp;</a>
            <p>
              <button id="usw-publish-style"
                      i18n="data-publish:publishStyle, data-push:publishPush"></button>
              <button id="usw-disconnect" i18n="optionsSyncDisconnect"></button>
              <span id="usw-progress"></span>
            </p>
            <section id="usw-data" class="aligned"></section>
          </main>
        </details>
        <details id="sections-list" data-pref="editor.toc.expanded" class="ignore-pref-if-compact">
          <summary><h2 id="toc-title" i18n="sections"></h2></summary>
          <ol id="toc"></ol>
        </details>
        <details id="lint" data-pref="editor.lint.expanded" class="ignore-pref-if-compact" hidden>
          <summary>
            <h2><span i18n="linterIssues"></span><span id="issue-count"></span>
              <a id="lint-help" class="icon intercepts-click" tabindex="0">
                <i class=i-info></i>
              </a>
            </h2>
          </summary>
          <div class="lint-report-container"></div>
        </details>
      </div>
      <div id="header-resizer" i18n="title:headerResizerHint"></div>
      <div id="footer" class="hidden">
        <a href="https://github.com/openstyles/stylus/wiki/Usercss"
           i18n="externalUsercssDocument"
           target="_blank"></a>
      </div>
    </div>
    <section id="sections"></section>
  </template>
</head>

<body id="stylus-edit" class="dvh100">
  <%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>
